<template>
  <div class="statistics-section">
    <el-row :gutter="20">
      <el-col :span="4" v-for="(card, index) in statisticsCards" :key="index">
        <div class="stat-card" :class="card.class">
          <div class="card-icon">
            <el-icon><component :is="card.icon" /></el-icon>
          </div>
          <div class="card-content">
            <div class="card-title">{{ card.title }}</div>
            <div class="card-value">{{ card.value }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { inject, computed } from 'vue'
import { HomeFilled, Shop, Checked, Service, DataAnalysis, View } from '@element-plus/icons-vue'

// 从父组件注入数据
const statisticsData = inject('statisticsData')

const statisticsCards = computed(() => [
  {
    title: '资产总数',
    value: statisticsData.value?.totalCount || 0,
    icon: HomeFilled,
    class: 'asset-total'
  },
  {
    title: '待出租数',
    value: statisticsData.value?.forRentCount || 0,
    icon: Shop,
    class: 'for-rent'
  },
  {
    title: '已出租数',
    value: statisticsData.value?.rentedCount || 0,
    icon: Checked,
    class: 'rented'
  },
  {
    title: '维护中',
    value: statisticsData.value?.maintenanceCount || 0,
    icon: Service,
    class: 'maintenance'
  },
  {
    title: '空置率',
    value: statisticsData.value?.vacancyRate || '0%',
    icon: DataAnalysis,
    class: 'vacancy-rate'
  },
  {
    title: '今日浏览量',
    value: statisticsData.value?.todayVisits || 0,
    icon: View,
    class: 'visits'
  }
])
</script>

<style lang="scss" scoped>
.statistics-section {
  .stat-card {
    position: relative;
    height: 120px;
    border-radius: 6px;
    margin-bottom: 15px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    overflow: hidden;
    background-color: #1890ff;
    
    &::before {
      content: '';
      position: absolute;
      top: -20px;
      right: -20px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.1);
      z-index: 1;
    }
    
    .card-icon {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 28px;
      opacity: 0.4;
      z-index: 2;
    }
    
    .card-content {
      position: relative;
      z-index: 2;
      
      .card-title {
        font-size: 14px;
        margin-bottom: 30px;
      }
      
      .card-value {
        font-size: 26px;
        font-weight: bold;
      }
    }
    
    &.asset-total {
      background-color: #409EFF;
    }
    
    &.for-rent {
      background-color: #67C23A;
    }
    
    &.rented {
      background-color: #E6A23C;
    }
    
    &.maintenance {
      background-color: #909399;
    }
    
    &.vacancy-rate {
      background-color: #F56C6C;
    }
    
    &.visits {
      background-color: #9254DE;
    }
  }
}
</style> 